<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bookmark Save</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap"
      rel="stylesheet"
    />
    <link href="output.css" rel="stylesheet" />
    <style>
      /* Custom scrollbar styles */
      ::-webkit-scrollbar {
        width: 6px;
      }

      ::-webkit-scrollbar-track {
        background: transparent;
        margin: 4px;
      }

      ::-webkit-scrollbar-thumb {
        background: #373a40;
        border-radius: 6px;
      }

      ::-webkit-scrollbar-thumb:hover {
        background: #4a4d52;
      }

      /* Smooth scroll behavior */
      html {
        scroll-behavior: smooth;
      }
      #restoreFileList button.restore-file-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 8px 14px;
        margin-bottom: 6px;
        background: #23272e;
        border-radius: 8px;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 15px;
        font-family: inherit;
        transition: background 0.2s, color 0.2s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #restoreFileList button.restore-file-btn:hover {
        background: #30343a;
        color: #45E3B8;
      }
      #restoreFileList .restore-file-time {
        color: #45E3B8;
        font-size: 13px;
        margin-left: 18px;
        flex-shrink: 0;
      }
      #restoreFileList .restore-file-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1 1 auto;
      }
    </style>
  </head>

  <body
    class="flex flex-col bg-[#1a1b1e] text-white font-sans leading-relaxed w-full h-screen overflow-hidden"
  >
    <!-- ====== Header Section ====== -->
    <header
    class="bg-[#25262b] flex shadow-lg w-full h-16 items-center justify-start sticky top-0 z-10 border-b border-white/5"
  >
    <div class="flex w-full justify-center h-full px-3 py-2 gap-3">
      <button
        id="lockButton"
        class="w-12 h-12  hover:bg-[#45E3B8] focus:ring-2 focus:ring-[#45E3B8] flex items-center justify-center rounded-xl text-2xl transition-all duration-300 hover:scale-105 active:scale-95 cursor-pointer shadow-lg shadow-[#45E3B8]/10 hover:shadow-xl hover:shadow-[#45E3B8]/20"
        aria-label="Lock bookmarks"
        title="锁定书签"
      >
        <span
          class="transform hover:scale-110 transition-transform duration-200"
        >
          🔒
        </span>
      </button>
      <!-- 👁️ 和 🕶️ 图标已删除 -->
      <button
        id="saveCurrentPage"
        class="w-12 h-12  hover:bg-[#45E3B8] focus:ring-2 focus:ring-[#45E3B8] flex items-center justify-center rounded-xl text-2xl transition-all duration-300 hover:scale-105 active:scale-95 cursor-pointer shadow-lg shadow-[#45E3B8]/10 hover:shadow-xl hover:shadow-[#45E3B8]/20"
        aria-label="Save current page"
        title="保存当前页面"
      >
        <span
          class="transform hover:scale-110 transition-transform duration-200"
        >
          💾
        </span>
      </button>
      <button
        id="insertDividerTopBtn"
        class="w-12 h-12 hover:bg-[#45E3B8] focus:ring-2 focus:ring-[#45E3B8] flex items-center justify-center rounded-xl text-2xl transition-all duration-300 hover:scale-105 active:scale-95 cursor-pointer shadow-lg shadow-[#45E3B8]/10 hover:shadow-xl hover:shadow-[#45E3B8]/20"
        aria-label="插入分割线"
        title="插入分割线"
      >
        <span class="transform hover:scale-110 transition-transform duration-200">—</span>
      </button>
      <button
        id="backupButton"
        class="w-12 h-12 hover:bg-[#45E3B8] focus:ring-2 focus:ring-[#45E3B8] flex items-center justify-center rounded-xl text-2xl transition-all duration-300 hover:scale-105 active:scale-95 cursor-pointer shadow-lg shadow-[#45E3B8]/10 hover:shadow-xl hover:shadow-[#45E3B8]/20"
        aria-label="Backup settings"
        title="备份/恢复"
      >
        <span
          class="transform hover:scale-110 transition-transform duration-200"
        >
          ☁️
        </span>
      </button>
      <button
        id="checkLatencyBtn"
        class="w-12 h-12 hover:bg-[#45E3B8] focus:ring-2 focus:ring-[#45E3B8] flex items-center justify-center rounded-xl text-2xl transition-all duration-300 hover:scale-105 active:scale-95 cursor-pointer shadow-lg shadow-[#45E3B8]/10 hover:shadow-xl hover:shadow-[#45E3B8]/20"
        aria-label="检测所有网址延迟"
        title="检测所有网址延迟"
      >
        <span class="transform hover:scale-110 transition-transform duration-200">⏱️</span>
      </button>
    </div>
  </header>

    <!-- Lock Overlay -->
    <div
      id="lockOverlay"
      class="fixed inset-0 bg-[#1a1b1e] z-50 items-center justify-center p-8 hidden"
    >
      <div
        class="w-full max-w-md bg-[#25262b] rounded-2xl p-8 shadow-2xl border border-gray-700/30"
      >
        <h2
          class="text-2xl font-bold mb-6 text-center font-display"
          data-i18n="app_enter_password"
        >
          🔒 Enter Password
        </h2>
        <input
          type="password"
          id="passwordInput"
          class="w-full px-6 py-4 rounded-xl bg-[#2c2d33] text-white border border-gray-700/30 text-lg focus:outline-none focus:ring-2 focus:ring-[#45E3B8]/50 focus:border-transparent transition-all duration-300 shadow-inner shadow-black/10 mb-4"
          data-i18n="app_enter_password_placeholder"
          placeholder="Enter your password"
        />
        <button
          id="submitPassword"
          class="w-full px-6 py-4  hover:bg-[#45E3B8]/80 rounded-xl text-lg font-medium transition-all duration-300 shadow-lg shadow-[#45E3B8]/20 hover:shadow-xl hover:shadow-[#45E3B8]/30 hover:scale-105 active:scale-95"
          data-i18n="app_unlock"
        >
          Unlock
        </button>
        <p id="passwordError" class="mt-4 text-red-400 text-center hidden"></p>

      </div>
      <h1
        id="passwordWarning"
        class="text-sm mt-2 font-bold mb-6 text-left font-display"
        data-i18n="app_password_warning"
      >
        ⚠️ Important: <br> If you forget your password, it cannot be recovered or reset.
        Your data is stored only on this device and cannot be accessed without the correct password.
    </h1>
    </div>

    <!-- ====== Main Content ====== -->

    <main class="p-6 flex flex-col flex-1 overflow-hidden">
      <!-- Bookmarks List Section -->
      <section class="h-full">
        <div id="instructions" class="rounded-xl gap-1 border border-[#45E3B8]/20">
          <h1
            class="text-sm font-medium text-left  text-[#45E3B8] p-4"
            data-i18n="app_instruction_save"
      ></h1>
          <h1
            class="text-sm font-medium text-left text-[#45E3B8] p-4"
            data-i18n="app_instruction_lock"
      ></h1>
        <h1
            class="text-sm font-medium text-left text-[#45E3B8] p-4"
            data-i18n="app_instruction_view_basic"
        ></h1>
        <h1
            class="text-sm font-medium text-left text-[#45E3B8] p-4"
            data-i18n="app_instruction_view_incognito"
        ></h1>
        <h1
            class="text-sm font-medium text-left text-[#45E3B8] p-4"
            data-i18n="app_instruction_incognito_hint"
        ></h1>
      </div>
      </h1>
        <ul id="bookmarkList" class="gap-2 gap-y-1 w-full flex-wrap flex max-h-full overflow-y-auto pr-2">
          <!-- Example Bookmark Item -->

            <!--List will be displayed here-->
            <button
              class="text-red-400/70 hover:text-red-500 text-xl transition-all duration-300 opacity-0 group-hover:opacity-100 hover:scale-110 active:scale-90"
              aria-label="Delete bookmark"
            >
              🗑️
            </button>
          </li>
        </ul>
      </section>
    </main>

    <!-- Feedback Dialog -->
    <div
      id="feedbackDialog"
      class="fixed inset-0 bg-black/50 z-50 items-center justify-center p-8 hidden"
    >
      <div
        class="w-full max-w-md bg-[#25262b] rounded-2xl p-8 shadow-2xl border border-gray-700/30 transform transition-all duration-300 scale-95 opacity-0"
      >
        <h2
          class="text-2xl font-bold mb-4 text-center font-display"
          data-i18n="app_feedback_title"
        >
          ⭐ Like the extension?
        </h2>
        <p
          class="text-gray-300 text-lg text-center mb-8"
          data-i18n="app_feedback_text"
        >
          We'd be grateful if you could leave a review!
        </p>
        <div class="space-y-4">
          <button
            id="feedbackReview"
            class="w-full px-6 py-4 bg-[#45E3B8] hover:bg-[#45E3B8]/80 rounded-xl text-lg font-medium transition-all duration-300 shadow-lg shadow-[#45E3B8]/20 hover:shadow-xl hover:shadow-[#45E3B8]/30 hover:scale-105 active:scale-95"
            data-i18n="app_feedback_button_review"
          >
            Leave a review
          </button>
          <button
            id="feedbackLater"
            class="w-full px-6 py-4 bg-gray-700 hover:bg-gray-600 rounded-xl text-lg font-medium transition-all duration-300 hover:scale-105 active:scale-95"
            data-i18n="app_feedback_button_later"
          >
            Later
          </button>
          <button
            id="feedbackNever"
            class="w-full px-6 py-4 bg-transparent hover:bg-gray-800 rounded-xl text-lg font-medium text-gray-400 hover:text-gray-300 transition-all duration-300"
            data-i18n="app_feedback_button_never"
          >
            Don't show again
          </button>
        </div>
      </div>
    </div>

    <!-- Backup Dialog -->
    <div
      id="backupDialog"
      class="fixed inset-0 bg-black/50 z-50 items-center justify-center p-8 hidden"
    >
      <div
        class="w-full max-w-md bg-[#25262b] rounded-2xl p-8 shadow-2xl border border-gray-700/30 transform transition-all duration-300 scale-95 opacity-0"
      >
        <h2
          class="text-2xl font-bold mb-6 text-center font-display"
        >
          ☁️ 备份设置
        </h2>
        
        <!-- WebDAV Settings -->
        <div class="space-y-4 mb-6">
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">WebDAV 服务器地址</label>
            <input
              type="url"
              id="webdavUrl"
              class="w-full px-4 py-3 rounded-xl bg-[#2c2d33] text-white border border-gray-700/30 text-base focus:outline-none focus:ring-2 focus:ring-[#45E3B8]/50 focus:border-transparent transition-all duration-300"
              placeholder="https://your-webdav-server.com/dav/"
            />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">用户名</label>
            <input
              type="text"
              id="webdavUsername"
              class="w-full px-4 py-3 rounded-xl bg-[#2c2d33] text-white border border-gray-700/30 text-base focus:outline-none focus:ring-2 focus:ring-[#45E3B8]/50 focus:border-transparent transition-all duration-300"
              placeholder="用户名"
            />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">密码</label>
            <input
              type="password"
              id="webdavPassword"
              class="w-full px-4 py-3 rounded-xl bg-[#2c2d33] text-white border border-gray-700/30 text-base focus:outline-none focus:ring-2 focus:ring-[#45E3B8]/50 focus:border-transparent transition-all duration-300"
              placeholder="密码"
            />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">
              <input type="checkbox" id="rememberWebdavPassword" class="mr-2" />
              记住密码（不推荐）
            </label>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-row gap-4 justify-center items-center mt-2 mb-2">
          <button
            id="backupNow"
            class="px-6 py-2 rounded-full text-base font-semibold transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 text-white whitespace-nowrap flex items-center gap-2 border-0"
            style="letter-spacing:0.5px;background:linear-gradient(90deg,#45E3B8 0%,#2ecc71 100%);"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
            立即备份
          </button>
          <button
            id="restoreFromBackup"
            class="px-6 py-2 rounded-full text-base font-semibold transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 text-white whitespace-nowrap flex items-center gap-2 border-0"
            style="letter-spacing:0.5px;background:linear-gradient(90deg,#ff5f6d 0%,#ffc371 100%);"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 9l5 5 5-5" /></svg>
            立即恢复
          </button>
        </div>

        <!-- Status Message -->
        <div id="backupStatus" class="mt-4 text-center hidden">
          <p id="backupStatusText" class="text-sm"></p>
        </div>
      </div>
    </div>

    <!-- Restore Dialog -->
    <div
      id="restoreDialog"
      class="fixed inset-0 bg-black/50 z-50 items-center justify-center p-8 hidden"
    >
      <div
        class="w-full max-w-md bg-[#25262b] rounded-2xl p-8 shadow-2xl border border-gray-700/30 flex flex-col items-center"
      >
        <h2 class="text-2xl font-bold mb-6 text-center font-display">选择要恢复的备份</h2>
        <div id="restoreFileList" class="w-full max-h-64 overflow-y-auto mb-4"></div>
        <button id="closeRestoreDialog" class="mt-2 px-6 py-2 bg-gray-600 hover:bg-gray-700 rounded-xl text-base font-medium text-white transition-all duration-300">关闭</button>
      </div>
    </div>

    <!-- 分割线输入弹窗 -->
    <div id="dividerDialog" class="fixed inset-0 bg-black/50 z-50 items-center justify-center p-8 hidden">
      <div class="w-full max-w-xs bg-[#25262b] rounded-2xl p-6 shadow-2xl border border-gray-700/30 flex flex-col items-center">
        <h2 class="text-xl font-bold mb-4 text-center font-display">插入分割线</h2>
        <input id="dividerDialogInput" type="text" placeholder="分割线文本（可选）" class="w-full px-4 py-2 rounded-xl bg-[#2c2d33] text-white border border-gray-700/30 text-base focus:outline-none focus:ring-2 focus:ring-[#45E3B8]/50 focus:border-transparent transition-all duration-300 mb-4" />
        <div class="flex gap-4 w-full">
          <button id="dividerDialogOk" class="flex-1 px-4 py-2 rounded-xl bg-[#45E3B8] text-white font-medium hover:bg-[#2ecc71] transition-all duration-200">确定</button>
          <button id="dividerDialogCancel" class="flex-1 px-4 py-2 rounded-xl bg-gray-600 text-white font-medium hover:bg-gray-700 transition-all duration-200">取消</button>
        </div>
      </div>
    </div>

    <!-- ====== Footer Section ====== -->
    <footer
      class="bg-[#25262b] shadow-inner w-full text-center py-6 flex-shrink-0"
    >
      <!-- 已删除广告内容 -->
    </footer>

    <script type="module" src="popup.js"></script>
  </body>
</html>
